<!--
  Copyright 2017-2019 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!-- clearfix is needed for smaller screens where gt-config-return-link is floated  -->
<div class="clearfix">
  <a class="gt-config-return-link"
     href="config/synthetic-monitor-list{{agentQueryString()}}">
    Return to list
  </a>
</div>
<div class="card">
  <div class="card-header">
    <h2 ng-class="{'gt-lighten-font': !loaded && !httpError}">
      Synthetic monitors
      <span class="d-inline-block gt-separator">
        |
      </span>
      <span style="font-size: 24px;">{{heading}}</span>
    </h2>
  </div>
  <div class="card-body">
    <div ng-include src="'template/gt-loading-overlay.html'"></div>
    <div ng-include src="'template/gt-http-error-overlay.html'"></div>
    <!-- intentionally not using gt-form-autofocus-on-first-input as it doesn't make the most sense on this form -->
    <div ng-form
         name="formCtrl"
         style="padding-top: 15px;">
      <fieldset class="form-group">
        <div class="row">
          <legend class="col-xl-3 gt-check-legend-xl">
            Synthetic monitor type
          </legend>
          <div class="col-xl-9">
            <div class="form-check">
              <label class="form-check-label">
                <input class="form-check-input"
                       type="radio"
                       ng-model="config.kind"
                       ng-disabled="!agentRollup.permissions.config.edit.syntheticMonitors"
                       value="ping">
                Ping
              </label>
            </div>
            <div class="form-check">
              <label class="form-check-label">
                <input class="form-check-input"
                       type="radio"
                       ng-model="config.kind"
                       ng-disabled="!agentRollup.permissions.config.edit.syntheticMonitors"
                       value="java">
                Java
              </label>
            </div>
          </div>
        </div>
      </fieldset>
      <div ng-if="config.kind === 'ping'">
        <div gt-form-group
             gt-type="url"
             gt-label="Ping URL"
             gt-model="config.pingUrl"
             gt-pattern="/^https?:\/\//"
             gt-required="loaded"
             gt-disabled="!agentRollup.permissions.config.edit.syntheticMonitors"
             gt-rows="10"
             class="gt-alert-java-class">
          <div class="help-block">
            The HTTP or HTTPS URL to ping with a simple GET request.
          </div>
        </div>
        <div gt-form-group
             gt-label="Display name"
             gt-model="config.display"
             gt-disabled="!agentRollup.permissions.config.edit.syntheticMonitors"
             gt-width="40em"
             gt-placeholder="Ping {{config.pingUrl ? config.pingUrl : '<url>'}}">
          <div class="help-block">
            Display name for this synthetic monitor.
          </div>
        </div>
        <div gt-form-group
             gt-label="ID"
             gt-model="config.id"
             gt-disabled="!agentRollup.permissions.config.edit.syntheticMonitors || !isNew()"
             gt-width="40em">
          <div class="help-block">
            ID for this synthetic monitor. This will be auto-generated on creation if left blank.
          </div>
        </div>
      </div>
      <div ng-if="config.kind === 'java'">
        <div gt-form-group
             gt-label="Display name"
             gt-model="config.display"
             gt-disabled="!agentRollup.permissions.config.edit.syntheticMonitors"
             gt-width="40em"
             gt-required="loaded">
          <div class="help-block">
            Display name for this synthetic monitor.
          </div>
        </div>
        <!-- the id below is needed for css style (see config.less) -->
        <div gt-form-group
             gt-type="codemirror"
             gt-label="Java source"
             gt-model="config.javaSource"
             gt-required="loaded"
             gt-disabled="!agentRollup.permissions.config.edit.syntheticMonitors"
             id="gtSyntheticJavaSource">
          <div class="help-block">
            A Java class that executes the synthetic monitor.
          </div>
          <div class="help-block">
            The class can be named anything.
            The entry method must be named <em>test</em> and take a single parameter of
            type <em>org.openqa.selenium.WebDriver</em>.
          </div>
          <div class="help-block">
            Any string constants that begins with the text "ENCRYPT:" will be encrypted
            (using two-way encryption so they can be decrypted when running the synthetic monitor).
            The encryption/decryption key is unique to your glowroot central instance and is stored in the file named
            <em>secret</em> inside the glowroot central directory.
          </div>
          <div ng-if="javaSourceCompilationErrors"
               class="gt-button-message-error"
               style="font-weight: bold;">
            <div ng-repeat="compilationError in javaSourceCompilationErrors">
              {{compilationError}}
            </div>
          </div>
        </div>
      </div>
      <div class="form-group row"
           ng-if="agentRollup.permissions.config.edit.syntheticMonitors">
        <div class="offset-xl-3 col-xl-9">
          <div gt-button-group>
            <div gt-button
                 gt-label="{{config.version ? 'Save changes' : 'Add'}}"
                 gt-click="save(deferred)"
                 gt-validate-form="formCtrl"
                 class="d-inline-block">
            </div>
            <div gt-button
                 ng-if="config.version"
                 gt-label="Delete"
                 gt-click="delete(deferred)"
                 gt-btn-class="btn-secondary"
                 class="d-inline-block">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- each page with confirmation dialog needs its own confirmation dom so that it is deleted on $destroy -->
<div ng-include="'template/gt-confirmation.html'"></div>
